<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Creating
                    </div>
                    <h3 class="page-title">
                        New Module's Data
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card">
                    <actions on-submit="$ctrl.saveModuleData()" back-url="$ctrl.backUrl" ng-if="$ctrl.backUrl">
                    </actions>
                    <div class="card-body">
                        <!-- <div class="mt-3"></div> -->
                        <statuses status="$ctrl.data.status"></statuses>
                    </div>
                </div>
            </nav>
        </aside>

        <div class="content-body py-3 pe-3">
            <form ng-init="$ctrl.initModuleForm()" class=" row" ng-class="{'submitted': submitted}"
                ng-submit="$ctrl.saveModuleData()" id="module-{{$ctrl.data.moduleId}}">
                <div class="col">
                    <div class="card mb-4">
                        <h6 class="card-header">Module Data</h6>
                        <div class="card-body">
                            <div class="row" ng-if="$ctrl.data">
                                <div class="col-sm-12">
                                    <div ng-repeat="prop in $ctrl.data.dataProperties track by $index">
                                        <module-form-editor is-show-title="$ctrl.isShowTitle" column-title="prop.title"
                                            column="prop" data="$ctrl.data.jItem[prop.name]" datatype="prop.dataType"
                                            ng-if="!prop.isSelect">
                                        </module-form-editor>

                                        <div ng-if="prop.isSelect" class="mb-3">
                                            <label class="control-label" ng-if="$ctrl.isShowTitle"
                                                ng-bind="prop.title"></label>
                                            <!-- <mix-select-icons ng-if="prop.dataType==19" options="prop.options" data="$ctrl.data.jItem[prop.name]['value']"></mix-select-icons> -->
                                            <i class="{{$ctrl.data.jItem[prop.name]['value']}}"></i>
                                            <select ng-if="prop.options.length > 0" class="form-select form-control"
                                                ng-model="$ctrl.data.jItem[prop.name]['value']">
                                                <option ng-repeat="item in prop.options track by $index"
                                                    ng-value="item">
                                                    {{item}}
                                                </option>
                                            </select>
                                            <!-- <br/><br/>
                                    <input type="text" class="form-control form-control-sm" ng-model="$ctrl.data.jItem[prop.name]['value']" placeholder="Other options" /> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body text-end">
                            <button type="submit" class="btn btn-primary btn-round px-3">
                                <em class="fas fa-save"></em> Save Data
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>